<template>
	<scroll-view style="height: 100vh;" scroll-y :scroll-into-view="scroll" @scroll="toScroll">
		<view class="product-details pb-150">
			<!-- 头部 -->
			<view class="f ai-c jc-s-b ph-32 pv-12 hearder" :style="{ top: statusBarHeight + 'px' }" v-show="show">
				<view class="w-64 h-64 b-64 f ai-c jc-c black" @click="toBack">
					<image src="http://cwht.ricecs.cn/app/shop/back-b.png" class="w-32 h-32"></image>
				</view>
				<view class="f ai-c mp-weixin">
					<view class="w-64 h-64 b-64 f ai-c jc-c mr-20 black" @click="handleCollect">
						<image :src="isCollect ? collectY : collectB" class="w-32 h-32"></image>
					</view>
					<view class="w-64 h-64 b-64 f ai-c jc-c black" @click="handleShare">
						<image src="http://cwht.ricecs.cn/app/shop/share-b.png" class="w-32 h-32"></image>
					</view>
				</view>
			</view>
			<!-- 滚动头部 -->
			<view :style="{ paddingTop: statusBarHeight + 'px' }" class="roll-hearder" v-show="!show">
				<view class="h-88 ph-32 f ai-c jc-s-b">
					<view class="f ai-c">
						<image src="../../static/back.png" class="w-40 h-33 mr-32" @click="toBack">></image>
						<view class="fs-28 text-color3 mr-24" :class="moduleId == 'shop' ? 'active' : ''" @click="toRoll('shop')">商品
						</view>
						<view class="fs-28 text-color3 mr-24" :class="moduleId == 'info' ? 'active' : ''" @click="toRoll('info')">详情
						</view>
						<view class="fs-28 text-color3 mr-24" :class="moduleId == 'evaluate' ? 'active' : ''"
							@click="toRoll('evaluate')">评价</view>
						<view class="fs-28 text-color3 mr-24" :class="moduleId == 'recommend' ? 'active' : ''"
							@click="toRoll('recommend')">推荐</view>
					</view>
					<view class="f mp-weixin">
						<image :src="isCollect ? collectY : collectH" class="w-40 h-40 mr-32" @click="handleCollect"></image>
						<image src="http://cwht.ricecs.cn/app/shop/share-h.png" class="w-40 h-40" @click="handleShare"></image>
					</view>
				</view>
			</view>
			<!-- 轮播图 -->
			<Banner :detail="detail" ref="banner" />
			<!-- 商品信息 -->
			<view class="sckill ph-20 mt-20">
				<view class="content b-24">
					<view class="box w-f h-340" v-if="detail.status == 1">
						<image
							:src="getBaseUrl() + '/admin-api/system/file/19/get/a908d3dea4406e302aabd998a27e97296f31623ebe96703a01d99db632748716.png'"
							class="w-f h-340"></image>
						<view class="sckill-box ph-32 pv-32 w-f">
							<view class="f ai-c jc-s-b w-f">
								<view>
									<text class="fs-28 fw-600 text-color5 mr-8">秒杀价</text>
									<text class="fs-36 text-color5">¥</text>
									<text class="fs-48 text-color5 fw-600">{{ detail.price }}</text>
								</view>
								<view class="f ai-c">
									<view class="fs-24 fw-500 text-color5 mr-12">距结束</view>
									<u-count-down :time="detail.endTime" format="DD:HH:mm:ss" autoStart millisecond @change="onChange">
										<view class="f">
											<view class="w-36 h-36 time b-4 fs-24 fw-500 f ai-c jc-c" v-show="timeData.days">
												{{ timeData.days }}</view>
											<view class="fs-24 fw-500 text-color5 mh-6" v-show="timeData.days">:</view>
											<view class="w-36 h-36 time b-4 fs-24 fw-500 f ai-c jc-c" v-show="timeData.hours">{{
                                            timeData.hours > 10 ? timeData.hours : '0' + timeData.hours
                                        }}</view>
											<view class="fs-24 fw-500 text-color5 mh-6" v-show="timeData.hours">:</view>
											<view class="w-36 h-36 time b-4 fs-24 fw-500 f ai-c jc-c" v-show="timeData.minutes">
												{{ timeData.minutes }}</view>
											<view class="fs-24 fw-500 text-color5 mh-6" v-show="timeData.minutes">:</view>
											<view class="w-36 h-36 time b-4 fs-24 fw-500 f ai-c jc-c" v-show="timeData.seconds">
												{{ timeData.seconds }}</view>
										</view>
									</u-count-down>
								</view>
							</view>
							<view class="fs-24 old-price mt-4">原价 ¥{{ detail.originalPrice }}</view>
							<!-- <view class="mr-16"><view class="h-32 b-4 ph-8 preferential fs-22 text-color8">满--减--</view></view> -->
							<view class="mt-25 fs-36 fw-600 text-color5">{{ detail.name }}</view>
						</view>
					</view>
					<view class="box b-24 pt-20" v-if="detail.status == 0">
						<view class="w-f h-172 content">
							<image
								:src="getBaseUrl() + '/admin-api/system/file/19/get/a24ccff6bb3e08559b0dc418393a458f68916a1b23e769513bd09620eb26c01a.png'"
								class="w-f h-172"></image>
							<view class="info ph-32 pt-56">
								<view class="f ai-c jc-s-b">
									<view>
										<text class="fs-28 fw-600 text-color5 mr-8">秒杀价</text>
										<text class="fs-36 text-color5">¥</text>
										<text class="fs-48 text-color5 fw-600">{{ detail.price }}</text>
									</view>
									<view class="fs-26 fw-500 freight">运费：¥{{ detail.freight||0 }}</view>
								</view>
								<view class="fs-24 old-price mt-4">原价 ¥--</view>
							</view>
						</view>
					</view>
					<view class="mt-8 ph-32 f fc-w pb-32">
						<view v-for="(item, index) in detail.products" :key="index"
							class="h-64 b-64 ph-24 f ai-c spec fs-26 text-color4 mr-16 mt-24"
							:class="index == specCurt ? 'active' : ''" @click="changeCurt(index)">{{ item.skuName }}</view>
					</view>
				</view>
			</view>
			<!-- 详情 -->
			<Info :detail="detail" :shopData="shopData" ref="info" id="info" />
			<!-- 评价 -->
			<!-- <Evaluate ref="evaluate" id="evaluate" /> -->
			<Evaluate ref="evaluateRef" id="evaluate" :detail="detail" />
			<!-- 推荐好货 -->
			<Recommend id="recommend" />
			<!-- 分享 -->
			<Share ref="share" />
			<!-- 底部 -->
			<view class="foot">
				<view :style="{ paddingBottom: safeAreaBottom + 'px' }" class="bot w-f">
					<view class="f ai-c jc-s-b h-100 ph-40 pv-14">
						<view class="f ai-c jc-s-b f1 mr-30">
							<view class="f ai-c fd-c" @click="toShop">
								<image src="http://cwht.ricecs.cn/app/shop/shop-h.png" class="w-32 h-32"></image>
								<view class="fs-20 text-color4 mt-8"> 店铺</view>
							</view>
							<view class="f ai-c fd-c" @click="handleCollect">
								<image :src="isCollect ? collectY : collectH" class="w-32 h-32"></image>
								<view class="fs-20 text-color4 mt-8"> 收藏</view>
							</view>
						</view>
						<view class="w-506 btn h-72 b-72 f ai-c jc-c fs-28 fw-600 text-color5 disabled" disabled
							v-if="detail.time === 'end'">秒杀已结束 </view>
						<view class="w-506 btn h-72 b-72 f ai-c jc-c fs-28 fw-600 text-color5 disabled" disabled
							v-else-if="detail.time === 'noStart'">{{ detail.startTimeData }}开始秒杀
						</view>
						<view class="w-506 btn h-72 b-72 f ai-c jc-c fs-28 fw-600 text-color5 " @click="submit" v-else>立即秒杀 </view>
					</view>
				</view>
			</view>
		</view>
	</scroll-view>
</template>
<script setup lang="ts">
	import { ref, getCurrentInstance } from 'vue';
	import { seckillActivity, storeDetail, spuGetDetail } from '@/services/api/shop/index';
	import { addressGetDefault } from '@/services/api/address';
	import { favoriteExits, favoriteCreate, favoriteDelete } from '@/services/api/shop/collect';
	import { onPageScroll, onReady, onLoad, onShow } from '@dcloudio/uni-app';
	import collectB from '@/static/shop/collect-b.png';
	import collectH from '@/static/shop/collect-h.png';
	import collectY from '@/static/shop/collect-y.png';
	import Banner from './Banner.vue';
	import Info from './Info.vue';
	import Evaluate from '../productDetails/Evaluate.vue';
	import Recommend from '@/components/recommend/index.vue';
	import Share from './Share.vue';
	import { useAuthStore } from '@/store/modules/auth';
	import { getBaseUrl } from '@/utils/env';
	const { proxy } = getCurrentInstance();
	const authStore = useAuthStore();
	const show = ref(true);
	const id = ref('');
	//规格
	const specShow = ref(false);
	const specCurt = ref(0);
	const specType = ref();
	const number = ref(1);
	//详情
	const detail = ref<any>();
	//是否收藏
	const isCollect = ref(false);
	//地址
	const address = ref('');
	//店铺详情
	const shopData = ref('');
	//滚动模块
	const banner = ref();
	const shop = ref();
	const info = ref('');
	const evaluate = ref('');
	const moduleId = ref('');
	const shopModule = ref(0);
	const infoModule = ref(0);
	const evaluateModule = ref(0);
	const recommendModule = ref(0);
	const scroll=ref('')
	//倒计时
	const timeData = ref({});
	//分享
	const share = ref();
	onLoad((options : any) => {
		id.value = options.id;
		getDetail();
	});
	onShow(() => {
		uni.setNavigationBarColor({
			frontColor: '#ffffff',
			backgroundColor: '#ffffff',
		});
		let pages = getCurrentPages();
		let currPage : any = pages[pages.length - 1];
		let addressData = currPage.data.addressData;
		//选择地址
		if (addressData) {
			address.value = addressData;
		}
	});
	const onChange = (e : any) => {
		timeData.value = e;
	};
	function toBack() {
		uni.navigateBack();
	}
	// 分享
	const handleShare = () => {
		share.value.getShow(true);
	};
	//提交
	async function submit() {
		//立即购买
		const list = [
			{
				shop: shopData.value.name,
				goods: [
					{
						sku: detail.value.products[specCurt.value],
						count: number.value,
						spu: {
							secondCategoryId: detail.value.secondCategoryId,
							picUrl: detail.value.picUrl,
							id: detail.value.id,
							name: detail.value.name,
						},
					},
				],
			},
		];
		console.log(list)
		authStore.setOrderGoods(list);
		uni.navigateTo({
			url: '/pages_shop/confirmOrder/index?seckillActivityId=' + detail.value.id,
		});
	}
	//切换规格
	const changeCurt = (data : number) => {
		detail.value.price = detail.value.products[data].seckillPrice;
		specCurt.value = data;
	};
	//显示规格
	function showSpec(type : string) {
		specShow.value = true;
		specType.value = type;
	}
	//跳转购物车
	const toShopCart = () => {
		uni.navigateTo({
			url: '/pages_shop/shopCart/index',
		});
	};
	//跳转店铺
	function toShop() {
		uni.navigateTo({
			url: `/pages_shop/business/index?id=${detail.value.storeId}`,
		});
	}
	//选择地址
	function toAddress() {
		uni.navigateTo({
			url: `/pages_mine/myAddress?type=select`,
		});
	}
	//获取默认地址
	async function getDefaultAddress() {
		const { data } = await addressGetDefault({});
		address.value = data;
	}
	//详情
	async function getDetail() {
		const { data } = await seckillActivity({ id: id.value });
		data.picUrl = data.picUrl ? data.picUrl.split(',') : [];
		data.time = getTime(data.startTime, data.endTime);
		//判断开始时间是否为当天
		const timestamp1 = Math.floor(new Date().getTime() / (24 * 60 * 60 * 1000));
		const timestamp2 = Math.floor(data.startTime / (24 * 60 * 60 * 1000));
		if (timestamp1 == timestamp2) {
			data.startTimeData = proxy.$moment(data.startTime).format('HH:mm');
		} else {
			data.startTimeData = proxy.$moment(data.startTime).format('YYYY/MM/DD HH:mm');
		}

		data.endTime = data.endTime - new Date().getTime();
		data.endTime = data.endTime < 0 ? 0 : data.endTime;
		data.price = data.products[0].seckillPrice
		// console.log(data.endTime)
		detail.value = data;

		getDefaultAddress();
		getFavoriteExits();
		getShopDetail();
		getShop();
	}
	//开始时间  秒杀时间
	function getTime(startTime : number, endTime : number) {
		let nowDate = new Date().getTime();
		console.log(proxy.$moment(nowDate).format('YYYY-MM-DD HH:mm:ss'), nowDate);

		console.log(proxy.$moment(startTime).format('YYYY-MM-DD HH:mm:ss'), startTime);
		console.log(proxy.$moment(endTime).format('YYYY-MM-DD HH:mm:ss'), endTime);
		let data : any = '';
		if (nowDate < startTime) {
			console.log('秒杀未开始');
			data = 'noStart';
		} else if (nowDate > endTime) {
			console.log('秒杀结束');
			data = 'end';
		} else {
			data = endTime - nowDate;
		}
		console.log(data, 456465);
		return data;
	}
	//检查是否收藏
	async function getFavoriteExits() {
		const { data } = await favoriteExits({ id: id.value, collectionType: 1 });
		isCollect.value = data;
	}
	//店铺详情
	async function getShop() {
		console.log(detail.value.storeId)
		const { data } = await storeDetail({ storeId: detail.value.storeId });
		shopData.value = data;
	}
	async function getShopDetail() {
		const { data } = await spuGetDetail({ id: detail.value.spuId });

		detail.value.description = data.description;
		detail.value.storeId = data.storeId
	}
	//收藏/取消商品
	async function handleCollect() {
		isCollect.value = !isCollect.value;
		if (isCollect.value) {
			await favoriteCreate({ id: id.value, collectionType: 1 });
		} else {
			await favoriteDelete({ id: id.value, collectionType: 1 });
		}
	}
	//头部底部
	const systemInfo = uni.getSystemInfoSync();
	const statusBarHeight = systemInfo.statusBarHeight;
	let safeArea = systemInfo.safeArea;
	let screenHeight = systemInfo.screenHeight;
	let safeAreaBottom = screenHeight - safeArea.bottom;
	//滚动
	onReady(() => {
		uni.createSelectorQuery()
			.select('#shop')
			.boundingClientRect((rect : any) => {
				shopModule.value = rect.top;
				console.log('商品：', rect);
			})
			.exec();
		uni.createSelectorQuery()
			.select('#info')
			.boundingClientRect((rect : any) => {
				infoModule.value = rect.top;
				console.log('详情：', rect);
			})
			.exec();
		uni.createSelectorQuery()
			.select('#evaluate')
			.boundingClientRect((rect : any) => {
				evaluateModule.value = rect.top;
				console.log('评价：', rect);
			})
			.exec();
		uni.createSelectorQuery()
			.select('#recommend')
			.boundingClientRect((rect : any) => {
				recommendModule.value = rect.top;
				console.log('推荐：', rect);
			})
			.exec();
	});
	onPageScroll((e) => {
		if (e.scrollTop < 100) {
			show.value = true;
		} else {
			show.value = false;
		}
		if (e.scrollTop > 100 && e.scrollTop < shopModule.value) {
			moduleId.value = 'shop';
		} else if (e.scrollTop > shopModule.value && e.scrollTop < infoModule.value) {
			moduleId.value = 'info';
		} else if (e.scrollTop > infoModule.value && e.scrollTop < evaluateModule.value) {
			moduleId.value = 'evaluate';
		} else if (e.scrollTop > evaluateModule.value && e.scrollTop < recommendModule.value) {
			moduleId.value = 'recommend';
		}
	});
	function toScroll(e){
		if (e.scrollTop < 100) {
			show.value = true;
		} else {
			show.value = false;
		}
		
	}
	const toRoll = (type:string) => {
		scroll.value=type
		moduleId.value=type
		// if (type == 'shop') {
		// 	uni.pageScrollTo({
		// 		scrollTop: shopModule.value - 100,
		// 		duration: 200,
		// 	});
		// } else if (type == 'info') {
		// 	uni.pageScrollTo({
		// 		scrollTop: infoModule.value - 100,
		// 		duration: 200,
		// 	});
		// } else if (type == 'evaluate') {
		// 	uni.pageScrollTo({
		// 		scrollTop: evaluateModule.value - 100,
		// 		duration: 200,
		// 	});
		// } else if (type == 'recommend') {
		// 	uni.pageScrollTo({
		// 		scrollTop: recommendModule.value - 100,
		// 		duration: 200,
		// 	});
		// }
	};
</script>
<style lang="scss" scoped>
	.sckill {
		.content {
			background: #fff;

			.spec {
				background: #f5f5f5;
			}

			.active {
				background: #faf5e6;
				color: #fabb3c;
			}
		}

		.box {
			position: relative;

			.info {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
			}

			.freight {
				color: #fefffe;
			}

			.old-price {
				color: #ffb8bd;
				text-decoration: line-through;
			}

			.preferential {
				background: #fff;
				line-height: 32rpx;
				display: inline-block;
			}

			.sckill-box {
				position: absolute;
				left: 0;
				top: 0;

				.time {
					background: #fff;
					color: #ec5330;
				}
			}
		}
	}

	::v-deep button {
		padding: 0;
		margin: 0;
		background-color: #fff;
		line-height: 0;
		width: 40rpx;
		height: 80rpx;
	}

	.foot {
		.btn {
			background: #fabb3c;
		}

		.disabled {
			background: #fae3b4;
		}

		.bot {
			position: fixed;
			left: 0;
			bottom: 0;
			background: #fff;

			.add-cart {
				border: 2rpx solid #fabb3c;
			}

			.buy {
				background: #fabb3c;
			}

			::v-deep .u-button__text {
				font-size: 28rpx !important;
				font-weight: 600 !important;
				color: #fff;
			}

			::v-deep .u-button {
				height: 72rpx !important;
				padding: 0 !important;
			}
		}
	}

	.info {
		.preferential {
			background: #fff5f5;
			line-height: 32rpx;
			display: inline-block;
		}

		.background-white {
			background: #fff;
		}

		.old-price {
			text-decoration: line-through;
		}

		.text-position {
			position: relative;
			top: 22rpx;
		}

		.text-psymbol {
			position: relative;
			top: 12rpx;
		}
	}

	.product-details {
		background: #f5f5f5;
		min-height: 100vh;

		//#ifdef MP-WEIXIN
		.mp-weixin {
			margin-right: 170rpx;
		}

		//#endif
		.roll-hearder {
			background: #fff;
			position: fixed;
			width: 100%;
			left: 0;
			top: 0;
			z-index: 111;

			.active {
				font-weight: 600;
				color: #fac519;
			}
		}

		.to-top {
			border: 1rpx solid #dddddd;
			box-shadow: 0 2rpx 12rpx 0 #0000000f;
			position: fixed;
			right: 20rpx;
			bottom: 200rpx;
			background: #fff;
		}

		// .bot {
		//     position: fixed;
		//     left: 0;
		//     bottom: 0;
		//     background: #fff;
		//     .add-cart {
		//         border: 2rpx solid #fabb3c;
		//     }
		//     .buy {
		//         background: #fabb3c;
		//     }
		//     ::v-deep .u-button__text {
		//         font-size: 28rpx !important;
		//         font-weight: 600 !important;
		//         color: #fff;
		//     }
		//     ::v-deep .u-button {
		//         height: 72rpx !important;
		//         padding: 0 !important;
		//     }
		// }
		.hearder {
			position: fixed;
			width: 100%;
			left: 0;
			top: 0;
			z-index: 111;
		}

		.black {
			background: rgba(0, 0, 0, 0.4);
		}
	}
</style>